<template>
  <div class="order-item">
    <div class="head">
      <span>{{order.time}} </span>
      <span>订单号: <span class="orderNum">{{order.order_id}}</span></span>
      <i class="iconfont icon-lajitong1 delete" @click="deleteOrder(order.order_id,order.state)"></i>
    </div>
    <ul class="orderInfo">
      <li class="desc-wpar">
        <div class="img-warp">
          <img :src="order.g_picture"
               alt="图片加载失败">
        </div>
        <div class="Info-box">
          <p class="order-name">
            {{order.name}}
          </p>
          <p class="order-count">
            x1
          </p>
        </div>
      </li>
      <li>{{order.nickname}}</li>
      <li>￥{{order.price}}</li>
      <li v-if="order.state==1">未支付</li>
      <li v-else-if="order.state==2">待收货</li>
      <li v-else-if="order.state==3">待评价</li>
      <li v-else-if="order.state==4">已完成</li>
      <li><span class="lookCss" @click="lookOrder()">查看订单</span></li>
    </ul>
    <Modal v-model="isShow">
        <p>商品名称：{{order.name}}</p>
        <div class="img-warp">
          <img :src="order.g_picture"
               alt="图片加载失败">
        </div>
        <p>买家：{{order.nickname}}</p>
        <p>价格：￥{{order.price}}</p>
        <div slot="footer">
          <Button v-show="stateShow1" @click="toBuy(order.order_id,order.state)">付款</Button>
          <Button v-show="stateShow2" @click="toText">评价</Button>
          <Button v-show="stateShow3" @click="toGet(order.order_id,order.state)">收到商品</Button>
        </div>
    </Modal>
    <Modal v-model="pingjia" 
    title="评分"
    @on-ok="ok(order.order_id,order.state)"
    >
      <Rate v-model="value" />
    </Modal>
  </div>
</template>

<script>
import{getDetail} from '../../../../../../server/getDetail'
export default {
  data() {
    return {
      isShow:false,
      stateShow1:false,
      stateShow2:false,
      stateShow3:false,
      pingjia:false,//评价
      value:2,//评价
    }
  },
  props: {
    order: {
      type: Object,
      default: {}
    }
  },
  methods: {
    deleteOrder(order_id,state){//删除订单
      var them = this;
      var deTitle = '';
      if(state==1){
        deTitle = '该订单尚未购买，是否删除该订单？';
      }else if(state==2){
        deTitle = '该订单尚未送达您身边，是否删除该订单，删除后商品仍会寄送给您？';
      }else if(state == 3){
        deTitle = '该商品尚未评价，是否删除该订单？';
      }else if(state == 4){
        deTitle = '确定删除该订单？';
      }
      this.$Modal.info({
        title:deTitle,
        onOk:function(){
          var data={
            id:order_id,
          };
          getDetail('index/Getdetailitem/deleteOrder',data).then(res=>{
            if(res.err_code!=undefined){
              if(res.err_code==1000){
                them.$Message.success(res.message);
                them.$emit('newOrder');
              }else{
                them.$Message.error(res.message);
              }
            }else{
   
            }
          })
        }
      })
      
    },
    lookOrder(order_id,state){//查看订单
      this.isShow=true;
    },
    toBuy(order_id,state) {//支付
      var them = this
      this.$Modal.info({
        title: '是否支付？',
        onOk: function() {
          var data = {
            gid: parseInt(them.$route.query.gid),
            money: them.order.price,
            order_id:them.order.order_id,
          }
          getDetail('index/Getdetailitem/orderGet', data).then(res => {
            if (res.err_code == 1000) {
              them.$Message.success(res.message);
              them.stateShow1 = false;
              them.stateShow3 = true;
                them.$emit('newOrder');
            } else {
      
            }
          })
        }
      })
    },
    toText() {//评价
      this.pingjia = true;
    },
    toGet(order_id,state) {//收到商品
      var them = this;
      this.$Modal.confirm({
        title:"是否收到商品？",
        okText:'确认',
        onOk:function() {
          var data = {
            order_id : them.order.order_id,
          }
          getDetail('index/Getdetailitem/toGet',data).then(res=>{
            if(res.err_code!=undefined){
              if(res.err_code==1000){
                them.$Message.success(res.message);
                them.stateShow3 = false;
                them.stateShow2 = true;
                them.$emit('newOrder');
              }else{
          
              }
            }
          })
        }
      })
    },
    ok(order_id,state) {//确认评价
    var them = this;
      var data = {
            order_id : this.order.order_id,
          };
      getDetail('index/Getdetailitem/pingfen',data).then(res=>{
        if(res.err_code!=undefined){
          if(res.err_code==1000){
            this.isShow = false;
            this.stateShow2 = false;
                them.$emit('newOrder');
          }
        }
      })
    }
  },
  created() {
      if(this.order.state==1){
        this.stateShow1 = true;
      }else if(this.order.state == 3){
        this.stateShow2 = true;
      }else if(this.order.state == 2){
        this.stateShow3 = true;
      }
  }
}
</script>

<style scoped>
.order-item {
  margin: 10px 0;
  border: 1px solid #e5e5e5;
  height: 130px;
}
.head {
  padding: 10px;
  background: #f5f5f5;
  color: #aaaaaa;
  border-bottom: 1px solid #e5e5e5;
}
.head span {
  margin-right: 30px;
}
.orderNum {
  color: #000;
}
.delete {
  float: right;
  cursor: pointer;
  display: none;
}
.delete:hover {
  color: var(--color-main);
}
.order-item:hover .delete {
  display: block;
}
.orderInfo {
  display: flex;
  height: calc(100% - 32px);
}
.orderInfo > li {
  flex: 1;
  border-left: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orderInfo .desc-wpar {
  flex: 3;
  padding: 15px;
  /* width: 50%; */
  display: flex;
  justify-content: flex-start;
}
.img-warp {
  height: 60px;
  width: 60px;
}
.img-warp img {
  height: 100%;
  width: 100%;
  border: 1px solid #efefef;
}
.order-name {
  margin-bottom: 20px;
}
.Info-box {
  padding: 10px;
}
.lookCss{
  cursor: pointer;
}
.lookCss:hover{
  color: red;
}
</style>